<template>
    <div class="container_1">
        我是子组件
        <p>计数器正在运行。。。</p>
    </div>
    </template>
    
    <script setup>
    import {ref, onMounted, onUnmounted, onBeforeUnmount} from 'vue'
    const emit = defineEmits(['updateCount']); //定义emit事件
    let timer1 = null;//定义定时器
    let timer2 = null; //定义定时器
    const count = ref(0);//子组件内部计数
    
    //onMounted生命周期钩子函数
    //在组件挂载后执行
    onMounted(() => {
        timer1 = setInterval(() => {
            count.value ++; //每秒增加计数
            emit('updateCount', count.value) //向父组件发送更新的计数
        }, 1000)
        timer2 = setInterval(() => {
            alert('6秒过去了')
        },6000)
    })
    
    // onBeforeUnmount(() => {
    //     clearInterval(timer1)
    //     clearInterval(timer2)
    // })
    //onUnmunted生命周期钩子函数
    //在组件卸载后执行
    onUnmounted(() => {
        clearInterval(timer1) //清理定时器
        clearInterval(timer2)
    })
    </script>
    
    <style scoped>
    .container_1{
        background-color: rgb(130, 215, 205);
        border-radius: 15px;
        padding: 10px;
        margin:10px;
    }
    </style>